<template>
  <el-card>
    <el-row :gutter="10">
      <el-col :span="24"> <el-form  ref="queryForm" :inline="true"  label-width="68px">
        <el-form-item label="医生姓名">
          <el-input placeholder="请输入医生姓名"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-time-picker
            :picker-options="{
                selectableRange: '18:30:00 - 20:30:00'
                }"
            placeholder="搜索日期">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="时间段">
          <el-time-picker is-range format="HH:mm:ss" value-format="HH:mm:ss"
                          :style="{width: '100%'}" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至"
                          clearable>
          </el-time-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 8px;">
      <el-col :span="24">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%">
          <el-table-column
            label="医生姓名"
            prop="doctorName"
            width="150"
          ></el-table-column>
          <el-table-column
            label="日期"
            prop="bookDate"
            width="150"
          >
          </el-table-column>
          <el-table-column
            label="时间段范围"
            prop="timeSlot"
            width="200"
          >
          </el-table-column>
          <el-table-column
            label="预约人数上限"
            prop="numLimit"
            width="150"
          >
          </el-table-column>
          <el-table-column
            label="已预约人数"
            prop="hasBookedNum"
            width="150"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="open = true"
              >预约</el-button>
              <el-button
                size="mini"
                type="info"
              >详情</el-button>
              <el-button
                size="mini"
                type="primary"
              >咨询</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
        />
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="儿童姓名" prop="nickName" required>
              <el-input v-model="form.childName" placeholder="请输入儿童姓名" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="儿童月龄" prop="deptId" required>
              <el-input-number v-model="form.monthAge"   :min="1" :max="1000" label="请输入儿童月龄"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber" required>
              <el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" type="email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button>取 消</el-button>
      </div>
    </el-dialog>
  </el-card>

</template>

<script>
  export default {
    name: "parentBook",
    data() {
      return {
        tableData: [{
          bookDate: '2021-08-30',
          timeSlot: '08:30-09:30',
          numLimit: 3,
          doctorName: "吴钟富",
          hasBookedNum: 0,
          status: '0'
        },
          {
            bookDate: '2021-08-31',
            timeSlot: '07:30-08:30',
            numLimit: 69,
            hasBookedNum: 1,
            status: '1',
            numLimit: 3,
            doctorName: "李连杰"
          }
        ],
        total: 100,
        open: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
          deptId: undefined
        },
        form: {
          childName: '吴钟富',
          monthAge: 72,
          phone: '13173817032',
          email: '1614518467@qq.com'
        }
      }
    }
  }
</script>

<style scoped>

</style>
